<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div class="app-page-split">
    <t-card title="日志级别" header-bordered class="gl-h100" style="width: 600px; overflow: hidden; padding: 0">
      <t-form ref="formRef" :data="data" label-align="top">
        <!--        <t-form-item label="所属服务" :rules="[{ required: true, message: 'sss' }]">
          <lg-history-input v-model="data.service" code="logger" />
        </t-form-item>-->
        <t-form-item label="日志名称" :rules="[{ required: true, message: 'sss' }]">
          <lg-history-input v-model="data.name" code="logger" />
        </t-form-item>
        <t-form-item label="日志级别">
          <lg-dict v-model="data.level" code="LoggerLevelEnum" :clearable="false" />
        </t-form-item>
        <t-form-item>
          <btn-tool-update v-if="permits.update" :loading="loading" @click="ok" />
        </t-form-item>
        <t-form-item label="历史记录">
          <t-table :columns="columns" :data="history" bordered>
            <template #level="{ row }">
              <lg-text options="LoggerLevelEnum" :model-value="row.level" />
            </template>
            <template #op="{ row }">
              <btn-row-update v-if="permits.update" :loading="loading" @click="revert(row)">还原</btn-row-update>
            </template>
          </t-table>
        </t-form-item>
      </t-form>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LgDict from '@/soar/components/LgDict/index.vue';
import LgHistoryInput from '@/soar/components/LgHistoryInput/index.vue';
import BtnRowUpdate from '@/components/btns/RowUpdate.vue';
import LgText from '@/soar/components/LgText/index.vue';
import BtnToolUpdate from '@/components/btns/ToolUpdate.vue';
import api from './api';
import { notEmpty, usePermit } from '@/soar';
import { columns } from './schema';

const permits = usePermit({
  update: 'update',
});

const data = ref({
  service: '',
  name: '',
  level: 3,
});

const history = ref([]);
try {
  history.value = JSON.parse(localStorage.getItem('logger:history')) || [];
} catch (e) {}
function updateHistory(data: any[]) {
  localStorage.setItem('logger:history', JSON.stringify(data));
  history.value = data;
}

const loading = ref(false);
const formRef = ref();
function ok() {
  const row = data.value;
  notEmpty(row.name, '请输入日志名称');
  api
    .get(row)
    .then((res) => {
      return api.set(row).then(() => {
        for (const x of history.value) {
          if (x.service === row.service && x.name === row.name) {
            return true;
          }
        }
        history.value.push({ ...row, level: res });
        updateHistory(history.value);
        return true;
      });
    })
    .finally(() => {
      loading.value = false;
    });
  loading.value = true;
}

function revert(row: any) {
  api
    .set(row)
    .then(() => {
      updateHistory(history.value.filter((x) => x.service !== row.service || x.name !== row.name));
    })
    .finally(() => {
      loading.value = false;
    });
  loading.value = true;
}
</script>

<style lang="less" scoped></style>
